<template>
    <div class="container">
       <div class="sex">
           <div>
               <div class="chiose">性别</div>
               <div class="sign">可多选</div>
           </div>
           <div class="sex-chiose">
                <span class="sex-boy">男</span>
                <span class="sex-girl">女</span>
            </div>
        </div> 
        <div class="age">
           <div>
               <div class="chiose">年龄</div>
               <div class="sign">可多选</div>
           </div>
           <div class="age-chiose">
                <span class="ages">18-25</span>
                <span class="ages">26-35</span>
                <span class="ages">35以上</span>
            </div>
        </div> 
        <div class="age">
           <div>
               <div class="chiose chiose-xz">兴趣</div>
               <div class="sign">可多选</div>
           </div>
           <div class="constella-choice">
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
               <div>看书</div>
            </div>
        </div> 
        <div class="age">
           <div>
               <div class="chiose chiose-xz">星座</div>
               <div class="sign">可多选</div>
           </div>
           <div class="constella-choice">
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
               <div>白羊</div>
            </div>
        </div> 
         <div class="age">
           <div>
               <div class="chiose chiose-apart">部门</div>
               <div class="sign">可多选</div>
           </div>
           <div class="constella-choice part">
               <div>测试一分部</div>
               <div>测试一分部</div>
               <div>测试一分部</div>
               <div>测试一分部</div>
               <div>测试一分部</div>
               <div>测试一分部</div>
               <div>测试一分部</div>
               <div>测试一分部</div>
            </div>
        </div> 
       <div class="btn-group">
           <div class="reset-btn">重置</div>
           <div class="ok-btn">确认</div>
       </div> 
    </div>
</template>

<script>
import taglist from '@/components/tag';
export default {
    components: {
        taglist: taglist
    },
};
</script>
<style lang=less scoped>
.container{
    width: 100%;
    margin:0 auto;
    .sex,.age{
        padding: 3% 0 3% 3%;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        flex-wrap: wrap;
        height: auto;
        .chiose{
            font-size: 1.1rem;
            font-weight: bold;
        }
        .chiose-xz{
            padding-top: 35px;
        }
        .chiose-apart{
            padding-top: 45px;
        }
        .sign{
            font-size: 0.7rem;
            color: #7C7C7C;
        }
        .constella-choice{
            display: inline-flex;
            flex-wrap: wrap;
            width: 300px;
            margin-left: 3%;
            div{
                padding: 5px 18px;
                margin: 2% 0 1% 3%;
                border: 1px solid #ccc;
                border-radius: 15px;
                font-size:14px;
                color: #666666;
            }
        }
        .part{
            display: inline-flex;
            flex-wrap: wrap;
            width: 300px;
            div{
                padding: 5px 34px;
                margin: 2% 0 1% 3%;
                border: 1px solid #ccc;
                border-radius: 15px;
                font-size:14px;
                color: #666666;
            }
        } 
    }
    .sex-chiose,.age-chiose{
        padding-left: 5%;
        width: 300px;
        /* border: 1px solid; */
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        .sex-boy ,.sex-girl, .ages{
            padding: 3px 23px;
            border:1px solid #ccc;
            border-radius: 15px;
        }
        .ages{
            margin-left: 2%;
            padding: 5px 10px;
            color: #666666;
        }
       .sex-boy,.sex-girl{
           margin-left: 2%; 
           color: #666666;
        }
    }
    .btn-group{
        background: #E06363;
        width: 100%;
        height: 43px;
        line-height: 43px;
        display: flex;
        justify-content: space-around;
        text-align: center; 
        color: #fff;
        position: fixed;
        bottom: 0;
        .reset-btn{
           width: 50%;
           border-right: 1px solid #fff !important;
           text-align: center; 
        }
        .ok-btn{
           width: 50%;
           
        }
    }
}
</style>


